<template>
   <div class="card-detail">
        <div class="top-bt">
            <p class="revoke" @click="delete_card">联系墙主撕掉该便签</p>
            <p class="report">举报</p>
        </div>
        <NodeCard :note="card"></NodeCard>
        <div class="form">
            <textarea class="message" placeholder="请输入..." v-model="discuss"></textarea>
            <div class="bt">
                <input type="text" class="name" placeholder="签名" v-model="name" >
                <Button :class="{notallowed : !isDis}" @click="submit">确定</Button>
            </div>
        </div>
        <p class="title">评论{{ card.comcount }}</p>
        <div class="comment">
            <div class="comment-item" v-for="(e,index) in comment" :key="index">
                <div class="user-head" :style="{ backgroundImage :portrait[e.imgurl] }"></div>
                <div class="comment-content">
                    <div class="comment-top">
                        <p class="name">{{ e.name }}</p>
                        <p class="time">{{ dateOne(e.moment)}}</p>
                    </div>
                    <div class="comment-message">{{e.message}}</div>
                </div>
            </div>
            <p class="more" @click="getComment" v-show="page > 0">加载更多</p>
        </div>
    </div>
</template>

<script>
import NodeCard from "@/components/NodeCard.vue";
import Button from "./Button.vue";
import {comment} from "../mock/index"
import {portrait} from "@/static/data"
import { dateOne } from "@/static/getsj";
export default {
    data(){
        return{
            comment:comment.data,
            portrait,
            dateOne
        }
    },
    props:{
        card:{
            default:{},
        }
    },
    components:{
        NodeCard,Button,
    },
}
</script>

<style lang="less" scoped>
.card-detail {
    position: relative;
    padding: 0 12px;

    .top-bt {
        position: fixed;
        top: 0;
        left: 0;
        padding: 16px;
        display: flex;

        .revoke {
            color: #3b73f0;
            cursor: pointer;
            padding-right: 30px;
            font-size: 16px;
        }

        .report {
            font-size: 16px;
            cursor: pointer;
            color: #f67770;
        }
    }

    .form {
        .message {
            background: none;
            height: 56px;
            border: 1px solid rgba(148, 148, 148, 1);
            resize: none;
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            margin-top: 12px;
        }

        .bt {
            display: flex;
            padding-top: 6px;
            justify-content: space-between;

            .name {
                width: 200px;
                line-height: 20px;
                box-sizing: border-box;
                padding: 8px;
                background: none;
                border: 1px solid rgba(148, 148, 148, 1);
            }
        }
    }
    .more{
        color: #5B5B5B;
        text-align: center;
        cursor: pointer;
        padding: 20px;
    }
    .title {
        font-weight: 600;
        padding-top: 26px;
        padding-bottom: 16px;
    }
    .comment-item{
        display: flex;
        padding-bottom: 26px;
        .user-head{
            flex : none;
            width: 28px;
            height: 28px;
            border-radius: 20px;
            background-image: linear-gradient(180deg,#FFA9D9 0%,#E83D3D 100%);
            overflow: hidden;
        }
        .comment-content{
            padding-left: 8PX;

        }
        .comment-top{
            display: flex;
            align-items: center;
            .name{
                font-weight: 600;

            } 
            .time{
                font-size:12PX;
                padding-left:4PX;
                color: #949494;
            }
            .comment-message{
                padding-top: 4PX;

            }
        }
    }
}
.notallowed{
    opacity: 0.6;
    cursor: not-allowed;
}
</style>